<template>
	

	<body class="container">
		<div class="header ">
			<span></span>
			<span></span>
		</div>
		<div class="nav">
			<div class="nav_left">
				<h4>{{ username }}</h4>
				<p>点击编辑我的活资料</p>
			</div>
			<div class="nav_right">
				<div class="touxiang"><img src="./img/touxiang.png" ></div>
				<span></span>
			</div>
			
		</div>
		<div class="sub_nav">
			<div class="sub_nav_item">
				<h4><em>{{ day }}</em>天</h4>
				<p>坚持学习</p>
			</div>
			<div class="sub_nav_item">
				<h4><em>{{ hour }}</em>小时</h4>
				<p>坚持学习</p>
			</div>
			<div class="sub_nav_item">
				<h4><em>{{ subject }}</em>门</h4>
				<p>坚持学习</p>
			</div>
		</div>
		<div class="item_top">
			<figure>
				<span></span>
				<h4>学习数据</h4>
			</figure>
			<div class="item_top_right"></div>
		</div>
		<div class="item_body">
			<div class="item">
				<figure>
					<span class="icon1"></span>
					<h4>学习数据</h4>
				</figure>
				<div class="item_right"></div>
			</div>
			<div class="item">
				<figure>
					<span class="icon2"></span>
					<h4>我的收藏</h4>
				</figure>
				<div class="item_right"></div>
			</div>
			<div class="item">
				<figure>
					<span class="icon3"></span>
					<a href="../我的课程/index.html"><h4>我的课程</h4></a>
				</figure>
				<div class="item_right"></div>
			</div>
		</div>
		<div class="item_footer">
			<div class="item">
				<figure>
					<span class="icon4"></span>
					<h4>我的订单</h4>
				</figure>
				<div class="item_right"></div>
			</div>
			<div class="item">
				<figure>
					<span class="icon5"></span>
					<h4>下载记录</h4>
				</figure>
				<div class="item_right"></div>
			</div>
		</div>
		
		<div class="footer container">
				<ul>
					<li>
						<a @click="toIndex()">
							<span>&#xe751;</span>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a @click="toCourse()">
							<span>&#xe614;</span>
							<span>课程</span>
						</a>
					</li>
					<li>
						<a @click="toHuati()">
							<span>
								&#xe630;
							</span>
							<span>话题</span>
						</a>
					</li>
					<li>
						<a @click="toMyUser()">
							<span>&#xe600;</span>
							<span>我的</span>
						</a>
					</li>
				</ul>
			</div>
	</body>
</template>





<script setup>
import { onMounted, onBeforeUnmount, ref,reactive } from 'vue';
import './css/style.css'
import './iconfont/iconfont.css'
import './js/flexible.js'

const mounted = ref(false);


import request from "../../axios/request";
import { useRouter } from 'vue-router'
const router = useRouter()

import { useRoute } from 'vue-router'
const route = useRoute()
const username = localStorage.key(0)

const toIndex=()=>{
	router.push('/index')
}

const toCourse=()=>{
	router.push('/course')
}

const toHuati=()=>{
	router.push('/huati')
}

const toMyUser=()=>{
	router.push('/myuser')
}

const bookData = reactive({
  list: [],
});
var day = ref("1")
var hour = ref("")
var subject = ref("")
 const getdata=()=>{
	request({
    url: "http://127.0.0.1:8081/study",
    method: "get",
    params: { username: username },
  })
    .then((res) => {
    //   console.log(res);
		bookData.list =res.data
		// console.log(bookData.list)
				
		day.value =bookData.list[0].day
		hour.value=bookData.list[0].hour
		subject.value=bookData.list[0].subject
    })
    .catch((error) => {
    //   console.log(error);
    });
}
getdata();
</script>

